<template>
  <div class="recommend">
    <div class="banner">
      <van-swipe
        class="my-swipe"
        :autoplay="3000"
        indicator-color="white"
        :height="187.5"
      >
        <van-swipe-item v-for="(banner, index) in bannerImg" :key="index">
          <van-image height="187.5" :src="`${banner.img}@760w_380h.jpg`" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- <div class="smallImg">
      <van-image
        height="80"
        src="https://i0.hdslb.com/bfs/manga-static/8b843504867408d80c3a75fa2bb7132212379320.jpg@760w_380h"
        radius="10"
      />
    </div> -->
    <div class="content">
      <van-list :finished="finished" finished-text="没有更多了" @load="onLoad">
        <!-- <van-cell v-for="item in list" :key="item" :title="item" 
        /> -->
        <div
          class="item"
          v-for="item in homelist"
          :key="item.item_id"
         @click="$router.push({path:'/passage',query:{id: item.comic_id}})"
        >
          <div class="img">
            <img :src="item.horizontal_cover" alt="" />
          </div>
          <h3>{{ item.title }}</h3>
          <div class="type">
            <span>{{ item.style[0] }}</span>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
export default {
  props:["homelist","bannerImg"],
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
    };
  },
 
  methods: {
    //进入简介
    // topassage() {
    //   this.$router.push({path:"/passage",query:{id:this.homelist.comic_id}})
    //   // console.log(this);
    // },
   
    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.list = [];
          this.refreshing = false;
        }

        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }
        this.loading = false;

        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
  },
};
</script>

<style lang="scss" scoped>
.recommend {
  padding-bottom: 20px;

  .banner {
    border-bottom-right-radius: 180px 15px;
    border-bottom-left-radius: 180px 15px;
    overflow: hidden;
    .my-swipe .van-swipe-item {
      color: #fff;
      font-size: 20px;
      line-height: 150px;
      text-align: center;
      background-color: #39a9ed;
    }
  }
  .smallImg {
    padding: 0px 12px;
    margin-top: 20px;
  }
  .content {
    padding: 20px 12px;
    .van-list {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }
    .item {
      width: 170px;
      margin-top: 10px;
      &:nth-child(2n-1) {
        margin-right: 5px;
      }
      .img {
        width: 170px;
        height: 110px;
        border-radius: 5px;
        img {
          width: 100%;
          height: 100%;
          border-radius: 5px;
        }
      }
      h3 {
        font-size: 14px;
        color: #333;
        font-weight: bold;
        height: 32px;
        line-height: 32px;
      }
      .type {
        height: 14px;
        line-height: 14px;
        span {
          font-size: 12px;
          color: #999;
          font-weight: 500;
          margin-right: 10px;
        }
      }
    }
  }
  .van-list::v-deep .van-list__finished-text {
    width: 100%;
    text-align: center;
  }
  //    .van-list::v-deep .van-loading__text{
  //     width: 100%;
  //     text-align: center;
  //   }
  .van-image {
    width: 100%;
    overflow: hidden;
  }
}
</style>